<template>
    <el-row >
        <!-- STEPS显示 -->
        <el-row>
            <el-col :md='24' :lg='type < 3 ? 6:12'  >
                  <el-steps :active="activeIndex"  class='mb28  mt28'  align='left'  finish-status="success"  v-if='type<3'>
                    <el-step title="项目立项" :description="status>=4?  '已通过' : (status == 2 ? '审批中':'提审未通过') "></el-step>
                    <el-step title="项目过会" :description="status<5?  '未提审' : (status >= 7 ?  '已通过' : ( status == 5 ? '审批中':'提审未通过'))"></el-step>
                   
                  </el-steps>
                  <el-steps :active="activeIndex"  class='mb28  mt28'  align='left'  finish-status="success"  v-else>
                    <el-step title="项目立项"  description='已通过'></el-step>
                    <el-step title="项目过会"  description="已通过"></el-step>
                    <el-step title="协议用印" :description="status>=4?  '已通过' : (status == 2 ? '审批中':'提审未通过') "></el-step>
                    <el-step title="产品发行" :description="status<5?  '未提审' : (status >= 7 ?  '已通过' : ( status == 5 ? '审批中':'提审未通过'))"></el-step>
                  </el-steps>
            </el-col>
        </el-row>
        <!-- 类型tab -->
        <el-tabs tab-position="top"  v-model="activeName"   @tab-click="handleClick"  align='center'>
            <el-tab-pane label="项目立项"  name='first'  >项目立项 
                <span  v-if='type <3'>
                  <el-button v-if=' status == 2' type="warning" round size='mini' class='ml10'>审批中</el-button>
                  <el-button v-if=' status == 3' type="danger" round size='mini' class='ml10'>审批未通过</el-button>
                  <el-button v-if=' status >= 4' type="success" round size='mini' class='ml10'>已通过</el-button>
                </span>
                <span v-else>
                    <el-button  type="success" round size='mini' class='ml10'>已通过</el-button>
                </span>
            </el-tab-pane>
            <el-tab-pane label="项目过会"  name='second' v-if='type>1' >项目过会
                  <span v-if='type == 2'>
                        <el-button v-if=' status == 4 ' type="info" round size='mini' class='ml10'>未提审</el-button>
                        <el-button v-if=' status == 5' type="warning" round size='mini' class='ml10'>审批中</el-button>
                        <el-button v-if=' status == 6 ' type="danger" round size='mini' class='ml10'>审批未通过</el-button>
                        <el-button v-if=' status == 7 ' type="success" round size='mini' class='ml10'>已通过</el-button>
                  </span>
                  <span  v-else>
                        <el-button  type="success" round size='mini' class='ml10'>已通过</el-button>
                  </span>
            </el-tab-pane>
            <el-tab-pane label="协议用印"  name='third' v-if='type>2'>协议用印
                  <span v-if='type == 3'>
                          <el-button v-if=' status == 1 ' type="info" round size='mini' class='ml10'>未提审</el-button>
                          <el-button v-if=' status == 2 ' type="warning" round size='mini' class='ml10'>审批中</el-button>
                          <el-button v-if=' status == 3 ' type="danger" round size='mini' class='ml10'>审批未通过</el-button>
                          <el-button v-if=' status == 4 ' type="success" round size='mini' class='ml10'>已通过</el-button>
                  </span>
                  <span  v-else>
                        <el-button  type="success" round size='mini' class='ml10'>已通过</el-button>
                  </span>
            </el-tab-pane>
            <el-tab-pane label="产品发行"  name='fourth'  v-if='type>3'>产品发行
                  <el-button v-if=' status ==4' type="info" round size='mini' class='ml10'>未提审</el-button>
                  <el-button v-if=' status == 5' type="warning" round size='mini' class='ml10'>审批中</el-button>
                  <el-button v-if=' status == 6' type="danger" round size='mini' class='ml10'>审批未通过</el-button>
                  <el-button v-if=' status == 7' type="success" round size='mini' class='ml10'>已通过</el-button>
            </el-tab-pane>
        </el-tabs>
        <el-form  label-width="100px"    align='left'  ref="formdata" :model='formdata' >
            <el-form-item label="审批名称：" >
                  <span   v-if='type<3'>{{formdata.reqName}}</span>
                  <span   v-else>{{formdata.reqName}}</span>
            </el-form-item>
            <el-form-item label="项目类型：" >
                  <!-- 项目类型 -->
                  <span  v-if='formdata.prjType'>{{formdata.prjType | project_type}}</span>
                  <!-- 产品类型 -->
                  <span  v-else>{{formdata.prdType | project_type}}</span>
            </el-form-item>
            <el-form-item label="发行人：" >
                    <span  v-if='formdata.issuerName!=null'>{{formdata.issuerName}}</span>
                    <span  v-else>暂无</span>
            </el-form-item>
            <el-form-item label="审批历史：" ></el-form-item>
            <el-form-item   label-width="10px" >
                  <el-table
                      :data="table_history"  class='mt12'  
                      >
                      <el-table-column type="expand">
                          <template slot-scope="props">
                                <el-form label-position="left" class="demo-table-expand"  v-if='props.row.name.indexOf("申请")!=-1'>

                                  <el-form-item label="申请概述">
                                    <span>{{ props.row.reqDescription }}</span>
                                  </el-form-item>
                                  <el-form-item label="发起审批文件"  >
                                      <el-table
                                        :data="props.row.projectReqFileVOList"  class='mt12 '  style="width: 100%"   border  
                                        >
                                          <el-table-column  prop="name" label="文件名称"  align='center'></el-table-column>
                                          <el-table-column   label="操作" align='center'  width='220'>
                                                <template v-slot="list">
                                                        <el-button  type="primary" size="mini" round @click="checkWord(list.row)">预览</el-button>
                                                        <el-button  type="primary" size="mini" round @click="downloadFile(list.row.fileCode)">下载</el-button>
                                                </template>
                                          </el-table-column>
                                      </el-table>
                                  </el-form-item>
                                  
                                </el-form>

                                <el-form label-position="left" class="demo-table-expand"  v-if='props.row.name.indexOf("审批")!=-1'>
                                    
                                    <el-form-item label="审批意见文件"  >
                                      
                                        <el-table
                                        :data="props.row.fileList"  class='mt12 '  style="width: 100%"   border  v-if='props.row.fileList' >
                                              <el-table-column  prop="name" label="文件名称"  align='center'></el-table-column>
                                              <el-table-column              label="操作"      align='center'  width='220'>
                                                    <template v-slot="list">
                                                            <el-button  type="primary" size="mini" round @click="checkWord(list.row)">预览</el-button>
                                                            <el-button  type="primary" size="mini" round @click="downloadFile(list.row.code)">下载</el-button>
                                                    </template>
                                              </el-table-column>
                                        </el-table>
                                        <span  v-else>暂无</span>
                                    </el-form-item>
                                    <el-form-item label="审批人电子签名" label-width='110px' >
                                      
                                      <img  v-if='props.row.signatureImgCode!=null'  :src='sign_img+picUrl(props.row.signatureImgCode)' alt='电子签名图' class='signature_img'/>
                                      <span  v-else>暂无</span>
                                    </el-form-item>
                                </el-form>
                          </template>
                      </el-table-column>
                      <el-table-column  prop="assigneeUserName" label="审批发起人"  align='center'>
                          <template slot-scope="scope">
                                    <span  v-if='scope.row.name.indexOf("申请")!=-1'>{{scope.row.assigneeUserName}}</span>
                          </template>
                      </el-table-column>
                      <el-table-column  prop="name" label="操作"  align='center'></el-table-column>
                      <el-table-column  prop="createTime" label="发起时间"  align='center'>
                          <template slot-scope="scope">
                                <span  v-if='scope.row.name.indexOf("申请")!=-1'> {{scope.row.endTime | formatDate}}</span>
                                <span  v-else>--</span>
                          </template>
                      </el-table-column>
                      <el-table-column  prop="operation" label="审批结果"  align='center'>
                          <template slot-scope="scope">
                              <div  v-if='scope.row.name.indexOf("审批")!=-1'>
                                    <div  v-if=' scope.row.operation == "审批未通过" '  class="color-red"><i class="el-icon-warning-outline  color-red" ></i>不通过</div>
                                     <div  v-else  class='color-success'><i class="el-icon-circle-check  color-success" ></i>通过</div>
                              </div>
                              <span  v-else>--</span>
                          </template>
                      </el-table-column>
                      <el-table-column  prop="opinion" label="审批意见"  align='center'  width='350'>
                          <template slot-scope="scope">
                              <span  class='text-left  inline-block'>{{scope.row.opinion}}</span>
                          </template>
                      </el-table-column>
                      <el-table-column  prop="assigneeUserName" label="审批人"  align='center'>
                          <template slot-scope="scope">
                              <span  v-if='scope.row.name.indexOf("审批")!=-1'>{{scope.row.assigneeUserName}}</span>
                              <span  v-else>--</span>
                          </template>
                      </el-table-column>
                      <el-table-column  prop="endTime" label="审批时间"  align='center'>
                          <template slot-scope="scope">
                              <span  v-if='scope.row.name.indexOf("审批")!=-1'>{{scope.row.endTime | formatDate}}</span>
                              <span  v-else>--</span>
                          </template>
                      </el-table-column>
                  </el-table>
            </el-form-item>
        </el-form>
    </el-row>
</template>

<script>
//接口
import  { getExaCode,detailExamine,getExaHistory,getExaHistory_product }  from '@/api/examine/index' 
import  { getpdfcode }  from '@/api/common/file'/*pdf文件预览*/
export default {
  name: 'ExaHistory_pro',
  data(){
    return {
      /*static*/
      
      /*active*/
      activeName:'first',//tab当前的active值
      
      formdata:{

      },
      form:{
        textarea:''
      },
      table_history:[],//审批历史
      //提审项目信息
      info_pro:{

      },
      filelist:[],
      examine_img:process.env.BASE_API+'/op/fileupload/download_workflow_img?fileCode=',//返回流程图
      currentCode:'',//当前项目code
      type:'',//当前项目 审批type
      status:'',//项目状态
      activeIndex:'',//当前项目状态

      pro_setup_data:{},
      pro_LiftComunty_data:{},
      pro_discussion_data:{},
      pro_issue_data:{}, 

      sign_img:'download_file?fileCode=',//电子签名图
      from:'',//从项目 或产品过来
      prjCode:'',//当前的项目code
      prdCode:'',//当前的产品code

    }
  },
  created(){

      [this.currentCode,this.status,this.from]=[this.$route.query.code,this.$route.query.status,this.$route.query.from]
      //查看项目历史
      if(this.from == "prj"){
            this.prjCode = this.currentCode
            if( this.status <=3){
              this.type = 1
              this.activeIndex = 0
              this.activeName = 'first'
            }
            else if(this.status == 4  ||  this.status == 8){
              this.type = 1
              this.activeIndex = 1
              this.activeName = 'first'
            }
            else if(this.status <=6){
              this.type = 2
              this.activeIndex = 1
              this.activeName = 'second'
            }
            else if(this.status == 7  ||  this.status == 9){
              this.type = 2
              this.activeIndex = 2
              this.activeName = 'second'
            }
           
      }
      //查看产品历史
      if(this.from == "product"){
            this.prjCode = this.$route.query.prjCode
            this.prdCode = this.currentCode
            if(this.status <= 3){
                this.type = 3
                this.activeIndex = 2
                this.activeName = 'third'
              }
              else if(this.status == 4){
                this.type = 3
                this.activeIndex = 3
                this.activeName = 'third'
              }
              else if(this.status <=6){
                this.type = 4
                this.activeIndex = 3
                this.activeName = 'fourth'
              }
              else{
                this.type = 4
                this.activeIndex = 4
                this.activeName = 'fourth'
              }
      }
      // console.log(this.$route.query)
      this.pageInit()
      
  },
  methods:{
    /*初始化 页面  S*/
    async pageInit(){
        
        /*获得项目审批历史*/
        await getExaHistory(this.prjCode).then(res=>{
            if(res.data.flag == true){
                this.pro_setup_data = res.data.data.projectReqVO
                this.pro_LiftComunty_data = res.data.data.projectMeetingReqVO
                /*没有到产品的时候，自己适配data*/
                if(this.type<3){
                    if(this.status <=4){
                        this.formdata = this.pro_setup_data
                    }
                    if(this.status >=5 && this.status <=7 ){
                      this.formdata = this.pro_LiftComunty_data
                    }
                    this.table_history = this.formdata.reqHis
                }
            }
        })
        /*type》3 获得产品审批历史*/
        if(this.from == 'product'){
            await getExaHistory_product(this.prdCode).then(res=>{
                if(res.data.flag == true){
                      this.pro_discussion_data = res.data.data.productAgreementStampReqVO
                      this.pro_issue_data = res.data.data.productReleaseReqVO

                      if(this.status <=4){
                          this.formdata = this.pro_discussion_data
                      }
                      if(this.status >=5 && this.status <=7 ){
                        this.formdata = this.pro_issue_data
                      }
                      this.table_history = this.formdata.reqHis
                }
            })
        }
        
    },
    /*初始化 页面  E*/

   /*表格操作 S*/
    checkWord(row){
      // console.log(row)
      let pdfStr = row.name.search(/pdf/ig)
      let code = row.fileCode ? row.fileCode : row.code
      if(pdfStr !=-1){
        /*pdf文档*/
        window.open('download_file?fileCode='+code+'&token='+sessionStorage.getItem('tokenId')+'&isRead=1')
      }
      else {
        //doc文档
        getpdfcode(code)
      }
        // getpdfcode(code)
    },
    handleClick(tab, event) {
        // console.log(tab, event);
        if(tab.name == 'first'){
            this.formdata = this.pro_setup_data
        }
        if(tab.name == 'second' ){
            this.formdata = this.pro_LiftComunty_data
        }
        if(tab.name == 'third'){
            this.formdata = this.pro_discussion_data
        }
        if(tab.name == 'fourth'){
            this.formdata = this.pro_issue_data
        }

        this.table_history = this.formdata.reqHis
    },
    /*表格操作 E*/
  },
  components:{
   
  },
  computed:{
      picUrl(img_latter){
        let tokenId = sessionStorage.getItem('tokenId') 
        // return img_latter
        return function(value) {
          return value+'&token='+tokenId
        }
      }
  },
}
</script>

<style>
.el-tabs--left{overflow: visible;}


  /*.el-form--inline .el-form-item__content{width: 100%;}*/
</style>
